<template>
	<view>
		<cu-custom :isBack="true" leftIcon="delete" :showLeftIcon="false" @leftBtnClick="deleteDraftAction">
			<block slot="backText">返回</block>
			<block slot="content">{{postId==null?'发布帖子':'编辑帖子'}}</block>
		</cu-custom>
		<view class="bg-white radius margin padding-left padding-top padding-right">
			<view class="flex justify-between align-center solid-bottom">
				<input v-model="title" style="font-size: 32upx;width: 85%;" placeholder="取个好的标题万一火了呢"></input>
				<text class="text-sm">{{title.length}}/40</text>
			</view>
			<view v-for="(item,index) in dataList" :key="index">
				<!-- 文字 -->
				<view v-if="item.type=='text'" class="padding-top flex justify-start align-start"
					style="flex-direction: column;width: 100%;">
					<view class="flex justify-between align-center" style="width: 100%;">
						<view class="flex justify-start align-center">
							<text class="text-df text-gray padding-right">{{item.type_name}}</text>
						</view>
						<view class="flex justify-end align-center">
							<view @tap.stop="upAction(index)" class="text-bold text-xl">
								<text class="cuIcon-top text-gray"></text>
							</view>
							<view style="width: 40upx;"></view>
							<view @tap.stop="downAction(index)" class=" text-bold text-xl">
								<text class="cuIcon-down text-gray"></text>
							</view>
							<view style="width: 40upx;"></view>
							<view @tap.stop="deleteAction(index)" class=" text-bold text-xl">
								<text class="cuIcon-deletefill text-gray"></text>
							</view>
						</view>
					</view>
					<view style="height: 230upx;width: 100%;" class="padding-top-sm">
						<textarea v-if="item.font_size_name=='df'" cursor-spacing="30" @input="contentUpdate" :data-index="index"
							maxlength="-1" :value="item.content" placeholder="请输入内容"
							:class="[item.is_bold?'text-bold':'']+' text-'+item.text_color"
							style="height: 200upx;width: 100%;line-height: 40upx;letter-spacing: 2upx;font-size:28upx;">
							</textarea>
						<textarea v-if="item.font_size_name=='lg'" cursor-spacing="30" @input="contentUpdate" :data-index="index"
							maxlength="-1" :value="item.content" placeholder="请输入内容"
							:class="[item.is_bold?'text-bold':'']+' text-'+item.text_color"
							style="height: 200upx;width: 100%;line-height: 40upx;letter-spacing: 2upx;font-size:32upx;">
							</textarea>
						<textarea v-if="item.font_size_name=='xl'" cursor-spacing="30" @input="contentUpdate" :data-index="index"
							maxlength="-1" :value="item.content" placeholder="请输入内容"
							:class="[item.is_bold?'text-bold':'']+' text-'+item.text_color"
							style="height: 200upx;width: 100%;line-height: 40upx;letter-spacing: 2upx;font-size:36upx;">
							</textarea>
					</view>
					<view class="flex justify-start align-center padding-bottom-xs solid-bottom" style="width: 100%;">
						<text @tap.stop="textBoldAction(index)" v-if="item.is_bold"
							class="cuIcon-roundcheckfill text-blue">加粗</text>
						<text @tap.stop="textBoldAction(index)" v-else class="cuIcon-roundcheck text-gray">加粗</text>
						<view style="width: 70upx;"></view>
						<view class="flex justify-start align-center">
							<text @tap.stop="textFontSize(index,'xl')"
								:class="'text-bold text-xl text-'+[item.font_size_name=='xl'?'blue':'']">大</text>
							<view style="width: 40upx;"></view>
							<text @tap.stop="textFontSize(index,'lg')"
								:class="'text-bold text-lg text-'+[item.font_size_name=='lg'?'blue':'']">中</text>
							<view style="width: 40upx;"></view>
							<text @tap.stop="textFontSize(index,'df')"
								:class="'text-bold text-df text-'+[item.font_size_name=='df'?'blue':'']">小</text>
						</view>
						<view style="width: 85upx;"></view>
						<view @tap.stop="showExpandMenuAction" :data-index="index"
							class="text-bold text-xl">
							<text :class="'cuIcon-radioboxfill text-'+item.text_color"></text>
						</view>
					</view>
				</view>
				<!-- 大图 -->
				<view v-if="item.type=='big_image'"
					class="padding-top flex justify-start align-start padding-bottom solid-bottom"
					style="flex-direction: column;width: 100%;">
					<view class="flex justify-between align-center" style="width: 100%;">
						<text class="text-df text-gray">{{item.type_name}}</text>
						<view class="flex justify-end align-center">
							<view @tap.stop="upAction(index)" class=" text-bold text-xl">
								<text class="cuIcon-top text-gray"></text>
							</view>
							<view style="width: 40upx;"></view>
							<view @tap.stop="downAction(index)" class=" text-bold text-xl">
								<text class="cuIcon-down text-gray"></text>
							</view>
							<view style="width: 40upx;"></view>
							<view @tap.stop="deleteAction(index)" class=" text-bold text-xl">
								<text class="cuIcon-deletefill text-gray"></text>
							</view>
						</view>
					</view>
					<view v-if="item.image&&item.image.local.length>0" class="bg-img padding-top" style="width: 100%;">
						<image @tap.stop="ChooseBigImage(index)"
							:class="(item.image.is_uping==false&&item.image.remote==null)||(item.image.is_uping==true)?'bg-mask':''"
							:src="item.image.local" mode="widthFix" style="width: 100%;"></image>
						<view class="cu-load load-cuIcon text-white text-xl"
							:class="item.image.is_uping?'loading':'over'" style="position: absolute;z-index: 90;width: 30upx;height: 30upx;top: 45%;right: 48%;"></view>
						<view v-if="item.image.is_uping==false&&item.image.remote==null">
							<view @click.stop="retryUploadBig(index)"
								style="position: absolute;z-index: 99;width: 200upx;height: 200upx;top: 45%;right: 35%;">
								<view class="flex justify-center align-center padding-top-sm padding-bottom-sm" style="flex-direction: column;background-color: #3E3E3E;">
									<text class="text-white sm">上传失败</text>
									<text class="text-white sm">点击重试</text>
								</view>
							</view>
						</view>
					</view>
					<view v-else style="width: 100%;" class="flex justify-center align-center padding-top-sm">
						<view @tap.stop="ChooseBigImage(index)"
							class="solids text-gray flex justify-center align-center"
							style="width: 100upx;height: 100upx;">
							<text class="text-xl cuIcon-cameraadd text-gray"></text>
						</view>
					</view>
				</view>
				<!-- 小图 -->
				<view v-if="item.type=='small_image'"
					class="padding-top flex justify-start align-start solid-bottom"
					style="flex-direction: column;width: 100%;">
					<view class="flex justify-between align-center" style="width: 100%;">
						<text class="text-df text-gray">{{item.type_name}}</text>
						<view class="flex justify-end align-center">
							<view @tap.stop="upAction(index)" class=" text-bold text-xl">
								<text class="cuIcon-top text-gray"></text>
							</view>
							<view style="width: 40upx;"></view>
							<view @tap.stop="downAction(index)" class=" text-bold text-xl">
								<text class="cuIcon-down text-gray"></text>
							</view>
							<view style="width: 40upx;"></view>
							<view @tap.stop="deleteAction(index)" class=" text-bold text-xl">
								<text class="cuIcon-deletefill text-gray"></text>
							</view>
						</view>
					</view>
					<view class="grid col-4 grid-square flex-sub padding-bottom padding-top" style="width: 100%;">
						<view class="bg-img" v-for="(subItem,imgIndex) in item.image_list" :key="imgIndex"
							@click="ViewImage" :data-url="subItem.local" :data-listIndex="index">
							<image
								:class="(subItem.is_uping==false&&subItem.remote==null)||(subItem.is_uping==true)?'bg-mask':''"
								:src="subItem.local" mode="aspectFill"></image>
							<view class="cu-load load-cuIcon text-white padding-top"
								:class="subItem.is_uping?'loading':'over'"></view>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-listIndex="index"
								:data-index="imgIndex">
								<text class='cuIcon-close'></text>
							</view>
							<view v-if="subItem.is_uping==false&&subItem.remote==null">
								<view @click.stop="retryUpload(subItem,imgIndex,index)"
									style="position: absolute;z-index: 2;top: 40upx;right: 25upx;">
									<view class="flex justify-center align-center" style="flex-direction: column;">
										<text class="text-white sm">上传失败</text>
										<text class="text-white sm">点击重试</text>
									</view>
								</view>
							</view>
						</view>
						<view class="solids" @tap.stop="ChooseImage(index)" v-if="item.image_list.length<4">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<!-- 视频 -->
				<view v-if="item.type=='video'"
					class="padding-top flex justify-start align-start padding-bottom solid-bottom"
					style="flex-direction: column;width: 100%;">
					<view class="flex justify-between align-center" style="width: 100%;">
						<text class="text-df text-gray">{{item.type_name}}</text>
						<view class="flex justify-end align-center">
							<view @tap.stop="upAction(index)" class=" text-bold text-xl">
								<text class="cuIcon-top text-gray"></text>
							</view>
							<view style="width: 40upx;"></view>
							<view @tap.stop="downAction(index)" class=" text-bold text-xl">
								<text class="cuIcon-down text-gray"></text>
							</view>
							<view style="width: 40upx;"></view>
							<view @tap.stop="deleteAction(index)" class=" text-bold text-xl">
								<text class="cuIcon-deletefill text-gray"></text>
							</view>
						</view>
					</view>
					<view class="flex justify-between align-center padding-top" style="width: 100%;">
						<view class="flex justify-start align-center">
							<view class="label text-df padding-right">视频:</view>
							<view v-if="item.upingVideoSuccess&&!item.isUpingVideo" class="cu-avatar radius"
								:style="'background-image: url('+videoPoster+'?imageView2/2/w/200/h/200/q/75);'">
							</view>
							<view v-else class="cu-avatar radius" :style="'background-image: url('+videoPoster+');'">
							</view>
							<view class="flex justify-start align-center">
								<view class="padding-left cu-load load-cuIcon"
									:class="item.isUpingVideo?'loading':'over'"></view>
								<view v-if="item.isUpingVideo">
									<text class="padding-left-xs text-grey text-sm">上传中</text>
								</view>
								<view v-if="item.local.length>0&&item.isUpingVideo==false">
									<text
										class="padding-left-xs text-grey text-sm">{{item.upingVideoSuccess?'上传成功':'上传失败'}}</text>
								</view>
							</view>
						</view>
						<view @tap.stop="chooseVideo(index)"
							class="action lines-grey flex justify-center align-center solid">
							<text class="cuIcon-camera text-grey padding-sm"></text>
						</view>
					</view>
				</view>
			</view>
			<view :class="'cu-list grid no-border padding-top-xs col-'+[isManager?4:3]">
				<view @tap="addNewPart(item)" class="cu-item action" v-for="(item,index) in actions" :key="index">
					<view :class="['cuIcon-' + item.icon,'text-' + item.color]">
					</view>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="cu-card shadow">
			<view class="cu-item">
				<form>
					<view class="cu-form-group">
						<view class="flex justify-between align-center" style="width: 100%;">
							<view class="flex justify-start align-center">
								<view class="title">版块:</view>
							</view>		
							<view class="flex justify-start align-center">
								<view @tap="chooseForum" class="cu-tag radius line-blue text-cut">{{forum.name}}</view>
								<text v-if="forum.forum_id>1" @tap="clearForumAction" class="cuIcon-close text-gray padding-left-xs"></text>
							</view>
						</view>
					</view>
					<view class="cu-form-group">
						<view class="flex justify-between align-center" style="width: 100%;">
							<view class="flex justify-start align-center">
								<view class="title" style="min-width: 100upx;">话题:</view>
							</view>	
							<view v-if="topic==null">
								<button @tap="chooseTopicAction" class="cu-btn radius line-blue sm">#选择话题</button>
							</view>
							<view v-else class="flex justify-end align-center">
								<view @tap="chooseTopicAction" class="cu-tag radius line-blue text-cut"
									style="max-width: 90%;">#{{topic.title}}#</view>
								<text @tap="clearTopicAction" class="cuIcon-close text-gray padding-left-xs"></text>
							</view>
						</view>
					</view>
					<view v-if="isManager" class="cu-form-group">
						<view class="flex justify-between align-center" style="width: 100%;">
							<view class="flex justify-start align-center padding-right-sm" style="width: 50%;">
								<text class="text-df text-left" style="min-width: 100upx;">小程序:</text>
								<view @tap="chooseMiniProgramAction"
									class="cu-tag radius line-cyan radius text-sm padding-left-xs"
									style="height: 50upx;">{{miniProgram==null?'选择小程序关联':miniProgram.short_name}}
								</view>
							</view>
							<view class="flex justify-end align-center" style="width: 50%;">
								<text class="text-df padding-right-xs text-right" style="min-width: 100upx;">公众号:</text>
								<view @tap="chooseOfficialAccountAction" class="cu-tag radius line-olive radius text-sm"
									style="height: 50upx;">
									{{officialAccount==null?'选择公众号关联':officialAccount.name}}
								</view>
							</view>
						</view>
					</view>
					<view class="cu-form-group" style="width: 100%;">
						<view @tap="openVote" class="flex justify-between align-center" style="width: 100%;">
							<view class="title">添加投票 :</view>
							<view class="flex justify-end align-center">
								<view v-if="vote.voteItemList.length>0" class="cu-tag bg-blue">已添加{{vote.voteItemList.length}}个选项</view>
								<text class="cuIcon-right text-grey"></text>
							</view>
						</view>
					</view>
					<view class="cu-form-group" style="width: 100%;">
						<view @tap="jumpToAddDoc" class="flex justify-between align-center" style="width: 100%;">
							<view class="title">腾讯文档 :</view>
							<view class="flex justify-end align-center">
								<view v-if="realDocList.length" class="cu-tag bg-blue">已添加{{realDocList.length}}个文档</view>
								<text class="cuIcon-right text-grey"></text>
							</view>
						</view>
					</view>
				</form>
			</view>
			<view class="cu-tabbar-height"></view>
			<view class="cu-bar tabbar bg-white foot action flex justify-around align-center padding-top"
				style="width: 100%;">
				<button @tap="saveDraftAction" class="cu-btn round bg-grey" style="width: 25%;">保存草稿</button>
				<button @tap="previewAction" class="cu-btn round bg-grey" style="width: 25%;">预览内容</button>
				<button @tap="commitAction" :class="'cu-btn round '+themeColor" style="width: 25%;">立即发布</button>
			</view>
			<chunLei-popups v-model="showExpandMenu" :x="x" :y="y" dynamic>
				<view
					:class="'flex align-center justify-start '+[index!==expandMenuList.length-1?'padding-bottom-sm':'']"
					style="flex-direction: column;" v-for="(subList,index) in expandMenuList" :key="index">
					<view class="flex justify-start align-center padding-sm">
						<view @tap="chooseColor(index,0)" class="text-bold text-xl">
							<text :class="'cuIcon-radioboxfill text-'+subList[0]"></text>
						</view>
						<view style="width: 40upx;"></view>
						<view @tap="chooseColor(index,1)" class="text-bold text-xl">
							<text :class="'cuIcon-radioboxfill text-'+subList[1]"></text>
						</view>
					</view>
				</view>
			</chunLei-popups>
		</view>
	</view>
</template>

<script>
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue";
	import {
		getUserInfo
	} from '@/api/auth.js'
	import {
		createPost,
		uploadImage,
		postDetail,
		updatePost,
		uploadFile
	} from '@/api/api.js'
	import {
		isSaveDraftTipReadStatusOk,
		SaveDraftTipReadStatus,
		getDraft,
		saveDraft,
		deleteDraft
	} from '@/api/statusCache.js'
	import {
		checkUserSubscribeMessageStatus
	} from '@/api/utils.js'
	export default {
		components: {
			chunLeiPopups
		},
		data() {
			return {
				saveDraftTimer:null,
				//===== 富文本编辑
				textColorSettingIndex: 0,
				x: 30,
				y: 50,
				showExpandMenu: false,
				expandMenuList: [
					[
						'red',
						'orange',
					],
					[
						'blue',
						'cyan',
					],
					[
						'mauve',
						'purple'
					],
					[
						'pink',
						'green'
					],
					[
						'black',
						'grey'
					]
				],
				fontSizeXl: 16,
				fontSizeLg: 14,
				fontSizeDf: 12,
				displayFontXl: 36,
				displayFontLg: 32,
				displayFontDf: 28,
				themeColor: this.ThemeColor,
				maxImageCount: 6,
				maxVideoCount: 1,
				//========
				postId: null,
				post: null,
				dataList: [{
					type: 'text',
					type_name: "文字",
					content: '',
					is_bold: false,
					font_size: 14,
					display_font_size: 32,
					font_size_name: 'lg',
					text_color: 'black'
				}],
				docList: [],
				topic: null,
				appSetting: this.AppSetting,
				themeColor: this.ThemeColor,
				hasDraft: false,
				fromDraft: false,
				forum: {
					forum_id: 1,
					name: '康庄大道'
				},
				miniProgram: null,
				officialAccount: null,
				title: '',
				vote: {}
			}
		},
		mounted() {
			let that = this
			this.$nextTick(function(){
				that.saveDraftTimer = setInterval(that.autoSaveDraft,60000)
			})
		},
		onUnload() {
			clearInterval(this.saveDraftTimer)
		},
		computed: {
			videoPoster() {
				//视频封面就是文章内的第一张图
				let poster = null
				for (let index = 0; index < this.dataList.length; index++) {
					let item = this.dataList[index]
					if (item.type == 'big_image' && item.image !== null) {
						if (item.image.remote && item.image.remote.length > 0) {
							poster = item.image.remote
							break
						}
					}
					if (item.type == 'small_image' && item.image_list.length > 0) {
						for (let subIndex = 0; subIndex < item.image_list.length; subIndex++) {
							let subItem = item.image_list[subIndex]
							if (subItem.remote && subItem.remote.length > 0) {
								poster = subItem.remote
								break
							}
						}
					}
				}
				return poster
			},
			actions() {
				if (this.isManager) {
					return [{
							action: 'text',
							icon: 'edit',
							title: '文字',
							color: 'gray'
						},
						{
							action: 'big_image',
							icon: 'pic',
							title: '大图',
							color: 'gray'
						},
						{
							action: 'small_image',
							icon: 'apps',
							title: '小图',
							color: 'gray'
						},
						{
							action: 'video',
							icon: 'video',
							title: '视频',
							color: 'gray'
						}
					]
				}
				return [{
						action: 'text',
						icon: 'edit',
						title: '文字',
						color: 'gray',
						bold: 0,
					},
					{
						action: 'big_image',
						icon: 'pic',
						title: '大图',
						color: 'gray'
					},
					{
						action: 'small_image',
						icon: 'apps',
						title: '小图',
						color: 'gray'
					}
				]
			},
			realDocList() 
			{
				let pDocList = []
				this.docList.forEach(item=>{
					let isTitleValidate = item.title !== null && item.title !== undefined && item.title.length>0
					let isLinkValidate = item.link !== null && item.link !== undefined && item.link.length > 0
					if(isTitleValidate && isLinkValidate) {
						pDocList.push(item)
					}
				})
				return pDocList
			},
			realRichContentList() {
				//过滤内容
				let pDataList = []
				//元素内容是不是空
				this.dataList.forEach(subItem => {
					if (subItem.type == 'text' && subItem.content && subItem.content.length > 0) {
						pDataList.push(subItem)
					} else if (subItem.type == 'big_image' && subItem.image && subItem.image.local && subItem.image
						.local.length > 0) {
						pDataList.push(subItem)
					} else if (subItem.type == 'small_image' && subItem.image_list.length > 0) {
						pDataList.push(subItem)
					} else if (subItem.type == 'video' && subItem.local && subItem.local.length > 0) {
						pDataList.push(subItem)
					}
				})
				return pDataList
			},
			isManager() {
				if (this.appSetting.enable_user_video == 1) {
					return true
				}
				let userInfo = getUserInfo()
				if (userInfo.role == null) {
					return false
				}
				//是不是认证用户
				if (userInfo.group && userInfo.group.open_choose == 0) {
					return true
				}
				return userInfo.role_id > 0
			}
		},
		onPageScroll() {
			this.showExpandMenu = false
		},
		onLoad(options) {
			if (options.postId !== null && options.postId !== undefined) {
				this.postId = options.postId
				this.getPostDetail()
			}
			if (options.fromForum !== null && options.fromForum !== undefined) {
				const eventChannel = this.getOpenerEventChannel()
				// 监听replyComment事件，获取上一页面通过eventChannel传送到当前页面的数据
				let that = this
				eventChannel.on('forumPostPublish', function(data) {
					console.log(data)
					that.forum = data
				})
			}
			if (options.fromTopic !== null && options.fromTopic !== undefined) {
				const eventChannel = this.getOpenerEventChannel()
				// 监听replyComment事件，获取上一页面通过eventChannel传送到当前页面的数据
				let that = this
				eventChannel.on('topicPostPublish', function(data) {
					console.log(data)
					that.topic = data
				})
			}
			//允许发布的视频数量
			let userInfo = getUserInfo()
			if (userInfo.role == null) {
				//认证用户允许发三个
				if (userInfo.group && userInfo.group.open_choose == 0) {
					this.maxVideoCount = 3
					this.maxImageCount = 15
				} else {
					this.maxVideoCount = 1
					this.maxImageCount = 12
				}
			} else if (userInfo.role.role_id == 1) {
				this.maxVideoCount = 10
				this.maxImageCount = 20
			} else if (userInfo.role.role_id > 1) {
				this.maxVideoCount = 5
				this.maxImageCount = 18
			}
			this.initInfoFromDraft()
		},
		methods: {
			autoSaveDraft() 
			{
				this.saveDraftNow(true)
			},
			getPostDetail() {
				if (this.postId == null) {
					return
				}
				uni.showLoading({
					title: '正在加载...'
				})
				postDetail(this.postId).then(res => {
					uni.hideLoading()
					this.title = res.data.title
					this.post = res.data
					this.miniProgram = res.data.mini_program
					this.officialAccount = res.data.official_account
					this.forum = res.data.forum
					this.topic = res.data.topic
					this.docList = res.data.document_list
					this.dataList = []
					if (res.data.rich_content && res.data.rich_content.length > 0) {
						this.dataList = JSON.parse(res.data.rich_content)
					} else {
						//转成新的发布形式
						this.dataList.push({
							type: 'text',
							type_name: "文字",
							content: res.data.content,
							is_bold: false,
							font_size: 14,
							display_font_size: 32,
							font_size_name: 'lg',
							text_color: 'black'
						})
						if (res.data.link.indexOf('.mp4') !== -1) {
							this.dataList.push({
								type: 'video',
								type_name: '视频',
								url: res.data.link,
								local: null,
								isUpingVideo: false,
								upingVideoSuccess: false
							})
						}
						if (res.data.image_list && res.data.image_list.length > 0) {
							let imageItem = {
								type: 'small_image',
								type_name: '小图',
								image_list: [],
							}
							res.data.image_list.forEach(url => {
								let item = {
									'local': url,
									'remote': url,
									'is_uping': false,
								}
								imageItem.image_list.push(item)
							})
							this.dataList.push(imageItem)
						}
					}
				}).catch(error => {
					uni.hideLoading()
				})
			},
			jumpToAddDoc() {
				let that = this
				uni.navigateTo({
					url: '/pages/lessuse/add-doc/add-doc',
					success: function(res) {
						res.eventChannel.emit('addDoc', that.docList)
					},
					events: {
						commitEvent: function(data) {
							that.docList = data
						}
					}
				})
			},
			clearForumAction() {
				this.forum = {
					forum_id: 1,
					name: '康庄大道'
				}
			},
			clearTopicAction() {
				this.topic = null
			},
			chooseTopicAction() {
				let that = this
				uni.navigateTo({
					url: '/pages/always/topic-list/topic-list',
					events: {
						finishChoose: function(data) {
							that.topic = data
						}
					}
				})
			},
			loadDraft() {
				this.fromDraft = true
				let draft = getDraft()
				if (draft !== null && draft !== undefined) {
					this.title = draft.title
				}
				if (draft.miniProgram) {
					this.miniProgram = draft.miniProgram
				}
				if (draft.officialAccount) {
					this.officialAccount = draft.officialAccount
				}
				if (draft.forum) {
					this.forum = draft.forum
				}
				if (draft.vote) {
					this.vote = draft.vote
				}
				if (draft.docList) {
					this.docList = draft.docList
				}
				if (draft.richContentList) {
					draft.richContentList.forEach(item=>{
						if(item.type == 'big_image') {
							item.image.is_uping = false
						}
						if(item.type == 'small_image') {
							item.image_list.forEach(subItem=>{
								subItem.is_uping = false
							})
						}
						if(item.type == 'video') {
							item.is_uping = false
						}
					})
					this.dataList = draft.richContentList
				}
			},
			deleteDraftAction() {
				let that = this
				uni.showModal({
					title: '是否删除草稿?',
					content: '删除草稿后无法找回?',
					confirmText: '确定删除',
					cancelText:'手滑了',
					success(res) {
						if (res.confirm) {
							that.deleteDraft()
							that.hasDraft = false
							that.fromDraft = false
						}
					}
				})
			},
			initInfoFromDraft() {
				if (this.postId !== null) {
					this.hasDraft = false
					return
				}
				let draft = getDraft()
				if (draft == null || draft == undefined || draft == "{}" || draft == "") {
					this.hasDraft = false
					return
				}
				this.hasDraft = true
				if(this.hasDraft) {
					let that = this
					uni.showModal({
						title:'草稿提示',
						content:'检测到你上次有未完成的草稿，是否继续编辑?',
						confirmText:'继续编辑',
						success(res) {
							if(res.confirm) {
								that.loadDraft()
							}
						}
					})
				}
			},
			chooseForum() {
				let that = this
				uni.navigateTo({
					url: '/pages/always/forum-list/forum-list?isPublish=1',
					events: {
						finishChoose: function(data) {
							that.forum = data
						}
					}
				})
			},
			chooseMiniProgramAction() {
				let that = this
				uni.navigateTo({
					url: '/pages/always/mini-program-list/mini-program-list?isPublish=1',
					events: {
						finishChoose: function(data) {
							that.miniProgram = data
						}
					}
				})
			},
			chooseOfficialAccountAction() {
				let that = this
				uni.navigateTo({
					url: '/pages/always/official-account-list/official-account-list?isPublish=1',
					events: {
						finishChoose: function(data) {
							that.officialAccount = data
						}
					}
				})
			},
			saveDraftNow(auto) {

				//标题或者内容或者图片至少有一种才可以保存
				if (this.title.length == 0 && this.realRichContentList.length == 0) {
					if(auto == null || auto == undefined || auto == false) {
						uni.showToast({
							icon: 'none',
							title: '标题、内容、图片全部为空时不可以保存为草稿'
						})
					} 
					return
				}

				let params = {
					title: this.title,
				}

				if (this.miniProgram !== null) {
					params['miniProgram'] = this.miniProgram
				}

				if (this.officialAccount !== null) {
					params['officialAccount'] = this.officialAccount
				}

				if (this.forum !== null) {
					params['forum'] = this.forum
				}

				if (this.vote && this.vote.voteItemList && this.vote.voteItemList.length > 0) {
					params['vote'] = this.vote
				}

				if (this.docList && this.docList.length > 0) {
					params['docList'] = this.docList
				}

				if (this.realRichContentList && this.realRichContentList.length > 0) {
					params['richContentList'] = this.realRichContentList
				}

				let status = saveDraft(params)
				if (status) {
					let title = '保存成功'
					if(auto && auto == true) {
						title = '已自动保存草稿'
						this.fromDraft = true
						this.hasDraft = true
					}
					uni.showToast({
						title: title
					})
					this.hasDraft = true
				}
			},
			saveDraftAction(auto) {
				if (!isSaveDraftTipReadStatusOk()) {
					let that = this
					uni.showModal({
						title: '保存草稿',
						content: '本地只能保存最多一份草稿，每次保存将覆盖前一份保存的草稿',
						confirmText: '继续保存',
						cancelText: '再想想',
						success(res) {
							if (res.confirm) {
								that.saveDraftNow()
							}
						}
					})
					SaveDraftTipReadStatus()
					return
				}
				this.saveDraftNow()
			},
			commitAction() {
				if (this.realRichContentList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '必须要有内容'
					})
					return
				}
				if (this.title.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '必须要有标题'
					})
					return
				}
				if (this.title.length > 40) {
					uni.showToast({
						icon: 'none',
						title: '标题不可超过40字'
					})
				}
				
				//停止保存草稿
				clearInterval(this.saveDraftTimer)

				let params = {
					title: this.title
				}

				if (this.miniProgram !== null) {
					params['programId'] = this.miniProgram.program_id
				}

				if (this.officialAccount !== null) {
					params['accountId'] = this.officialAccount.account_id
				}

				if (this.forum !== null) {
					params['forumId'] = this.forum.forum_id
				}

				if (this.topic !== null) {
					params['topicId'] = this.topic.topic_id
				}

				if (this.vote && this.vote.voteItemList && this.vote.voteItemList.length > 0) {
					let items = []
					for (let i = 0; i < this.vote.voteItemList.length; i++) {
						let item = this.vote.voteItemList[i]
						items.push({
							content: item.value
						})
					}
					let vote = {
						subject: this.vote.title,
						items: items
					}
					params['vote'] = vote
				}
				if (this.realDocList.length > 0) {
					params['documents'] = this.realDocList
				}
				params['richContent'] = this.realRichContentList
				uni.showLoading({
					title: '正在发表...'
				})
				if (this.postId !== null) {
					params['postId'] = this.postId
					updatePost(params).then(res => {
						uni.hideLoading()
						let postId = res.data.post_id
						uni.showToast({
							title: '更新成功'
						})
						checkUserSubscribeMessageStatus()
						uni.navigateBack({
							delta: 1
						})
					}).catch(error => {
						uni.hideLoading()
					})
					return
				}
				createPost(params).then(res => {
					uni.hideLoading()
					let publishPostId = res.data.post_id
					if (this.fromDraft) {
						deleteDraft()
						this.hasDraft = false
						this.fromDraft = false
						uni.showModal({
							title: '发表成功',
							content: '帖子发布成功后，草稿同时被删除~',
							cancelText: '取消',
							confirmText: '查看帖子',
							success(res) {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/detail/detail?postId='+publishPostId
									})
								} else {
									uni.navigateBack({
										delta: 1
									})
								}
								checkUserSubscribeMessageStatus()
							}
						})
					} else {
						uni.showModal({
							title: '发表成功',
							cancelText: '取消',
							confirmText: '查看帖子',
							success(res) {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/detail/detail?postId='+publishPostId
									})
								} else {
									uni.navigateBack({
										delta: 1
									})
								}
								checkUserSubscribeMessageStatus()
							}
						})
					}
				}).catch(error => {
					uni.hideLoading()
				})
			},
			openVote() {
				let that = this
				uni.navigateTo({
					url: '/pages/lessuse/vote/vote',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						commitEvent: function(data) {
							console.log(data)
							that.vote = data.vote
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						if (that.vote && that.vote.voteItemList && that.vote.voteItemList.length > 0) {
							res.eventChannel.emit('acceptDataFromOpenerPage', {
								vote: that.vote
							})
						}
					}
				})
			},
			chooseColor(index, subIndex) {
				let subItem = this.expandMenuList[index]
				this.dataList[this.textColorSettingIndex].text_color = subItem[subIndex]
			},
			showExpandMenuAction(e) {
				this.textColorSettingIndex = e.currentTarget.dataset.index
				this.x = e.touches[0].clientX
				this.y = e.touches[0].clientY
				this.showExpandMenu = !this.showExpandMenu
			},
			previewAction() {
				//过滤内容
				let pDataList = []
				//元素内容是不是空
				this.dataList.forEach(subItem => {
					if (subItem.type == 'text' && subItem.content && subItem.content.length > 0) {
						pDataList.push(subItem)
					} else if (subItem.type == 'big_image' && subItem.image && subItem.image.local && subItem.image
						.local.length > 0) {
						pDataList.push(subItem)
					} else if (subItem.type == 'small_image' && subItem.image_list.length > 0) {
						pDataList.push(subItem)
					} else if (subItem.type == 'video' && subItem.local && subItem.local.length > 0) {
						pDataList.push(subItem)
					}
				})

				if (pDataList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '没有内容可以预览'
					})
					return
				}

				let that = this
				uni.navigateTo({
					url: '/pages/publish/rich-content-preview',
					success(res) {
						res.eventChannel.emit('previewData', {
							list: that.dataList,
							title: that.title
						})
					}
				})
			},
			textFontSize(index, size) {
				this.dataList[index].font_size_name = size
				if (size == 'xl') {
					this.dataList[index].font_size = this.fontSizeXl
					this.dataList[index].display_font_size = this.displayFontXl
				}
				if (size == 'lg') {
					this.dataList[index].font_size = this.fontSizeLg
					this.dataList[index].display_font_size = this.displayFontLg
				}
				if (size == 'df') {
					this.dataList[index].font_size = this.fontSizeDf
					this.dataList[index].display_font_size = this.displayFontDf
				}
			},
			textBoldAction(index) {
				this.dataList[index].is_bold = !this.dataList[index].is_bold
			},
			swapItem(index1, index2) {
				this.dataList[index1] = this.dataList.splice(index2, 1, this.dataList[index1])[0];
			},
			upAction(index) {
				if (index == 0) {
					uni.showToast({
						icon: 'none',
						title: '无法再上移'
					})
					return
				}
				this.swapItem(index, index - 1)
			},
			downAction(index) {
				if (index == this.dataList.length - 1) {
					uni.showToast({
						icon: 'none',
						title: '无法再下移'
					})
					return
				}
				this.swapItem(index, index + 1)
			},
			deleteAction(index) {
				if (this.dataList.length == 1) {
					uni.showToast({
						icon: 'none',
						title: '请至少保留一块内容！'
					})
					return
				}
				let needTip = false
				//元素内容是不是空
				let subItem = this.dataList[index]
				if (subItem.type == 'text' && subItem.content && subItem.content.length > 0) {
					needTip = true
				} else if (subItem.type == 'big_image' && subItem.image && subItem.image.local && subItem.image.local
					.length > 0) {
					needTip = true
				} else if (subItem.type == 'small_image' && subItem.image_list.length > 0) {
					needTip = true
				} else if (subItem.type == 'video' && subItem.local && subItem.local.length > 0) {
					needTip = true
				}
				if (needTip) {
					let that = this
					uni.showModal({
						title: '删除提示',
						content: '确认需要删除当前内容块吗?',
						cancelText: '手滑了',
						confirmText: '确认删除',
						success(res) {
							if (res.confirm) {
								that.dataList.splice(index, 1)
								//是不是空了
								if (that.dataList.length == 0) {
									that.dataList.push({
										type: 'text',
										type_name: "文字",
										content: '',
										is_bold: false,
										font_size: this.fontSizeLg,
										display_font_size: this.displayFontLg,
										font_size_name: 'df',
										text_color: 'black'
									})
								}
							}
						}
					})
				} else {
					this.dataList.splice(index, 1)
				}

			},
			randomString(e) {
				e = e || 32
				var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678"
				let a = t.length
				let n = "";
				for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
				return n
			},
			ChooseBigImage(index) {
				let existCount = this.existImageCount()
				if (existCount >= this.maxImageCount) {
					uni.showModal({
						title: '图片上传数量限制',
						content: '最多只能上传' + this.maxImageCount + '张图片,请合理规划~'
					})
					return
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						let timestamp = new Date().getTime()
						let fileKey = String(timestamp)
						let random = this.randomString(6)
						fileKey += random
						let item = {
							'local': res.tempFilePaths[0],
							'remote': null,
							'is_uping': false,
							'fileKey': fileKey,
						}
						this.dataList[index].image = item
						this.dataList[index].image.is_uping = true
						uploadImage(this.dataList[index].image.local, this.dataList[index].image.fileKey, (
							imgUrl) => {
							console.log(imgUrl)
							this.dataList[index].image.remote = imgUrl
							this.dataList[index].image.is_uping = false
						}, (error) => {
							this.dataList[index].image.is_uping = false
						})
					}
				});
			},
			existVideoCount() {
				let existVideoCount = 0
				this.dataList.forEach(item => {
					if (item.type == 'video') {
						if (item.url !== null) {
							existVideoCount++
						}
					}
				})
				return existVideoCount
			},
			existImageCount() {
				let reachMaxImageCount = false
				let existImageCount = 0
				this.dataList.forEach(item => {
					if (item.type == 'big_image') {
						if (item.image !== null) {
							existImageCount++
						}
					}
					if (item.type == 'small_image') {
						if (item.image_list.length > 0) {
							existImageCount += item.image_list.length
						}
					}
				})
				return existImageCount
			},
			addNewPart(item) {
				console.log(item);
				if (item.action == 'text') {
					this.dataList.push({
						type: 'text',
						type_name: '文字',
						content: '',
						is_bold: false,
						font_size: this.fontSizeLg,
						display_font_size: this.displayFontLg,
						font_size_name: 'lg',
						text_color: 'black'
					})
					return
				}
				if (item.action == 'big_image' || item.action == 'small_image') {
					let existCount = this.existImageCount()
					if (existCount >= this.maxImageCount) {
						uni.showModal({
							title: '最多只能上传' + this.maxImageCount + '张图片,请合理规划~'
						})
						return
					}
				}
				if (item.action == 'big_image') {
					this.dataList.push({
						type: 'big_image',
						type_name: '大图',
						image: null,
					})
					return
				}
				if (item.action == 'small_image') {
					this.dataList.push({
						type: 'small_image',
						type_name: '小图',
						image_list: [],
					})
					return
				}
				if (item.action == 'video') {
					let existCount = this.existVideoCount()
					if (existCount >= this.maxVideoCount) {
						uni.showModal({
							title: '图片上传数量限制',
							content: '最多只能上传' + this.maxVideoCount + '个视频,请合理规划~'
						})
						return
					}
					this.dataList.push({
						type: 'video',
						type_name: '视频',
						url: null,
						local: null,
						isUpingVideo: false,
						upingVideoSuccess: false
					})
					return
				}
			},
			contentUpdate(e) {
				let index = e.currentTarget.dataset.index
				this.dataList[index].content = e.detail.value
			},
			ChooseImage(index) {
				let existCount = this.existImageCount()
				if (existCount >= this.maxImageCount) {
					uni.showModal({
						title: '最多只能上传' + this.maxImageCount + '张图片,请合理规划~'
					})
					return
				}
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						let subItem = this.dataList[index]
						for (let index = 0; index < res.tempFilePaths.length; index++) {
							let timestamp = new Date().getTime()
							let fileKey = String(timestamp)
							let random = this.randomString(6)
							fileKey += random
							let item = {
								'local': res.tempFilePaths[index],
								'remote': null,
								'is_uping': false,
								'fileKey': fileKey,
							}
							subItem.image_list.push(item)
						}
						subItem.image_list.forEach(item => {
							if (item.is_uping == false && item.remote == null) {
								item.is_uping = true
								uploadImage(item.local, item.fileKey, (imgUrl) => {
									console.log(imgUrl)
									item.remote = imgUrl
									item.is_uping = false
								}, (error) => {
									item.is_uping = false
								})
							} else {
								console.log('file path is uploading:' + item);
							}
						})
					}
				});
			},
			ViewImage(e) {
				let index = e.currentTarget.dataset.listindex
				let subItem = this.dataList[index]
				console.log(e.currentTarget.dataset.url)
				let currentUrl = e.currentTarget.dataset.url
				if (currentUrl == null || currentUrl.length == 0) {
					return
				}
				let previewImgList = []
				subItem.image_list.forEach(item => {
					previewImgList.push(item.local)
				})
				uni.previewImage({
					urls: previewImgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				console.log(e)
				let index = e.currentTarget.dataset.listindex
				let subItem = this.dataList[index]
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							subItem.image_list.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			retryUploadBig(index) {
				let subItem = this.dataList[index]
				subItem.image.is_uping = true
				uploadImage(subItem.image.local, subItem.image.fileKey, (imgUrl) => {
					console.log(imgUrl)
					subItem.image.remote = imgUrl
					subItem.image.is_uping = false
				}, (error) => {
					subItem.image.is_uping = false
				})
			},
			retryUpload(item, index, listIndex) {
				let subItem = this.dataList[listIndex]
				subItem.image_list[index].is_uping = true
				uploadImage(item.local, item.fileKey, (imgUrl) => {
					console.log(imgUrl)
					subItem.image_list[index].remote = imgUrl
					subItem.image_list[index].is_uping = false
				}, (error) => {
					subItem.image_list[index].is_uping = false
				})
			},
			chooseVideo(index) {
				let existCount = this.existVideoCount()
				if (existCount >= this.maxVideoCount) {
					uni.showModal({
						title: '视频上传数量限制',
						content: '最多只能上传' + this.maxVideoCount + '个视频,请合理规划~'
					})
					return
				}
				let that = this
				uni.chooseVideo({
					count: 1,
					maxDuration: 15,
					compressed: false,
					sourceType: ['camera', 'album'],
					success: function(res) {
						console.log(res)
						let subItem = that.dataList[index]
						subItem.local = res.tempFilePath;
						//上传视频
						let timestamp = new Date().getTime()
						let fileKey = String(timestamp) + '_' + res.width + '_' + res.height + '.mp4'
						subItem.isUpingVideo = true
						uploadFile(res.tempFilePath, fileKey, remoteUrl => {
							subItem.url = remoteUrl
							subItem.isUpingVideo = false
							subItem.upingVideoSuccess = true
						}, error => {
							console.log(error)
							subItem.isUpingVideo = false
							subItem.upingVideoSuccess = false
						})
					}
				});
			}
		}
	}
</script>

<style>

</style>
